<template>
  <div class="login">
    <div class="login_top">
      <div class="login_top_img"></div>
      <div class="login_top_tips">暂不登录</div>
    </div>
    <div class="login_middle">
      <div class="login_middle_box loginPatient" @click="toVertifyLogin(2)">
        我是患者
      </div>
      <div class="login_middle_box logindoctor" @click="toVertifyLogin(1)">
        我是医师
      </div>
    </div>
    <div class="login_bottom">登录</div>
  </div>
  <router-view v-slot="{ Component }">
    <transition name="slide">
      <component :is="Component" />
    </transition>
  </router-view>
</template>

<script>
export default {
  name: "login",
  data() {
    return {};
  },

  methods: {
    toVertifyLogin(e) {
      this.$router.push({
        path: "/login/vertifyLogin",
        query: { user_type: e },
      });
    },
  },
};
</script>

<style lang="scss" scope>
.loginPatient {
  background-color: #fbe9b7;
}
.logindoctor {
  background-color: #c6e3fc;
}
.login {
  width: 100%;
  box-sizing: border-box;
  padding-top: 30%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fbfbfb;
  &_top {
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    color: #333;
    &_img {
      width: 170px;
      height: 170px;
      border: 1px solid #ccc;
      background-color: #d0feb8;
    }
    &_tips {
      margin-top: 25px;
      font-size: 15px;
    }
  }
  &_middle {
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
    margin-top: 25px;
    &_box {
      margin: 20px 30px;
      padding: 25px 30px;
      font-size: 16px;
      font-weight: 550;
    }
  }
  &_bottom {
    margin-top: 25px;
    font-size: 12px;
    text-align: center;
  }
}
</style>
